<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Debot chat</title>
<link rel="stylesheet" href="./normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="../bootstrap-3.4.1-dist/js/jquery.min.js"></script>
</head>
<body>
<div class="app-container">
<div class="app-left">
<div class="app-left-header">
<div class="app-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs></defs>
<path class="path-1" fill="#3eb798" d="M448 193.108h-32v80c0 44.176-35.824 80-80 80H192v32c0 35.344 28.656 64 64 64h96l69.76 58.08c6.784 5.648 16.88 4.736 22.528-2.048A16.035 16.035 0 00448 494.868v-45.76c35.344 0 64-28.656 64-64v-128c0-35.344-28.656-64-64-64z" opacity=".4"></path>
<path class="path-2" fill="#3eb798" d="M320 1.108H64c-35.344 0-64 28.656-64 64v192c0 35.344 28.656 64 64 64v61.28c0 8.832 7.168 16 16 16a16 16 0 0010.4-3.84l85.6-73.44h144c35.344 0 64-28.656 64-64v-192c0-35.344-28.656-64-64-64zm-201.44 182.56a22.555 22.555 0 01-4.8 4 35.515 35.515 0 01-5.44 3.04 42.555 42.555 0 01-6.08 1.76 28.204 28.204 0 01-6.24.64c-17.68 0-32-14.32-32-32-.336-17.664 13.712-32.272 31.376-32.608 2.304-.048 4.608.16 6.864.608a42.555 42.555 0 016.08 1.76c1.936.8 3.76 1.808 5.44 3.04a27.78 27.78 0 014.8 3.84 32.028 32.028 0 019.44 23.36 31.935 31.935 0 01-9.44 22.56zm96 0a31.935 31.935 0 01-22.56 9.44c-2.08.24-4.16.24-6.24 0a42.555 42.555 0 01-6.08-1.76 35.515 35.515 0 01-5.44-3.04 29.053 29.053 0 01-4.96-4 32.006 32.006 0 01-9.28-23.2 27.13 27.13 0 010-6.24 42.555 42.555 0 011.76-6.08c.8-1.936 1.808-3.76 3.04-5.44a37.305 37.305 0 013.84-4.96 37.305 37.305 0 014.96-3.84 25.881 25.881 0 015.44-3.04 42.017 42.017 0 016.72-2.4c17.328-3.456 34.176 7.808 37.632 25.136.448 2.256.656 4.56.608 6.864 0 8.448-3.328 16.56-9.28 22.56h-.16zm96 0a22.555 22.555 0 01-4.8 4 35.515 35.515 0 01-5.44 3.04 42.555 42.555 0 01-6.08 1.76 28.204 28.204 0 01-6.24.64c-17.68 0-32-14.32-32-32-.336-17.664 13.712-32.272 31.376-32.608 2.304-.048 4.608.16 6.864.608a42.555 42.555 0 016.08 1.76c1.936.8 3.76 1.808 5.44 3.04a27.78 27.78 0 014.8 3.84 32.028 32.028 0 019.44 23.36 31.935 31.935 0 01-9.44 22.56z"></path>
</svg>
</div>
<h1>DebotChat</h1>
</div>

<div class="chat-list-wrapper">
    <div class="chat-list-header">磁盘使用率故障处置模板
        <svg class="list-header-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24">
            <defs></defs>
            <path d="M18 15l-6-6-6 6"></path>
        </svg>
    </div>
    <ul class="chat-list active" >
        <li class="chat-list-item active">
            <span class="chat-list-name ">故障处置流程模板： <br/><br/>
                步骤1.使用'AMDBID查询工具'查询获取'XX主机'的AMDBID,获取'XX主机'的AMDBID后执行步骤2  <br/><br/>
                步骤2.使用"AMDB属性查询工具"查询获取'XX主机'的IP地址、用户名、密码。获取信息后执行步骤3   <br/><br/>
                步骤3.使用"远程登录工具"登录'XX主机'。登录成功后执行步骤4   <br/><br/>
                步骤4.使用"日志查找工具"查找日志文件。获取日志路径列表后执行步骤5   <br/><br/>
                步骤5.使用"清理文件工具"删除日志文件。删除日志文件后执行步骤6   <br/><br/>
                步骤6.使用"远程登出工具"登出'XX主机'。登出成功后执行步骤7   <br/><br/>
                步骤7.使用"磁盘使用率查询工具"查询'XX主机'的磁盘使用率。获取磁盘使用率   <br/><br/>
            </span>
        </li>

        <li class="chat-list-item active">
            <span class="chat-list-name">
                    工具：    <br/><br/>
                1.AMDBID查询工具: 查看"XX主机"的AMDBID，参数:"objectName": "&lt;XX主机&gt;"    <br/><br/>
                2.AMDB属性查询工具: 查询"XX主机"的AMDB属性，参数1:"amdbId": "&lt;AMDBID&gt;",参数2:"attrList": "[IP地址,用户名,密码]"    <br/><br/>
                3.远程登录工具: 登录"XX主机"，参数1:"ip": "&lt;ip地址&gt;",参数2:"userName": "&lt;用户名&gt;",参数3:"passWord": "&lt;密码>"    <br/><br/>
                4.日志查找工具: 查找日志文件    <br/><br/>
                5.清理文件工具: 删除日志文件，参数:"fileList": "&lt;文件路径&gt;"    <br/><br/>
                6.远程登出工具: 登出"XX主机"，参数:"sessionId": "&lt;sessionId>"    <br/><br/>
                7.磁盘使用率查询工具: 查询"XX主机"的磁盘使用率，参数:"objectName": "&lt;XX主机&gt;"    <br/><br/>
            </span>
        </li>

    </ul>
</div>





</div>
<div class="app-main">
<div class="chat-wrapper" id="chatContext">


<!--<div class="message-wrapper reverse">
<img class="message-pp" src="./1.png" alt="profile-pic">
<div class="message-box-wrapper">
<div class="message-box">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>

<div class="message-wrapper">
<img class="message-pp" src="./1.png" alt="profile-pic">
<div class="message-box-wrapper">
<div class="message-box">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur
</div>
</div>
</div>-->


</div>
<div class="chat-input-wrapper">
<button class="chat-attachment-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-paperclip" viewBox="0 0 24 24">
<defs></defs>
<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"></path>
</svg>
</button>
<div class="input-wrapper">
<textarea class="chat-input" id="questionContent"  style=" resize: none;  height: 15em;"></textarea>
</div>
<button class="chat-send-btn" id="sendBtn">Send</button>
</div>
</div>
<div class="app-right">


</div>
<div class="app-right-bottom">

</div>
</div>
<script type="text/javascript" src="./script.js"></script>


</body></html>

<script type="text/javascript">


    $(document).ready(function(){
        var $this = this;
        if ($this.chatWebsocket && $this.chatWebsocket.readyState == 1) {
          $this.chatWebsocket.close()
        }
        window.onbeforeunload = function () {
          if ($this.chatWebsocket && $this.chatWebsocket.readyState == 1) {
            $this.chatWebsocket.close()
          }
        };

        var target = "ws://"+window.location.host+"/api/ws/user1"

        if ("WebSocket" in window) {
          $this.chatWebsocket = new WebSocket(target)
        } else {
          if ("MozWebSocket" in window) {
            $this.chatWebsocket = new MozWebSocket(target)
          } else {
            return
          }
        }

        //接收到消息的回调方法
        $this.chatWebsocket.onmessage = function (result) {

           try {
              var data = JSON.parse(result.data);


              var block =  document.getElementById(data.blockId);
              if(block!=undefined){
                var messageDiv = $($("#"+data.blockId).find("div[class=message-box]")[0])
                var historyMessage = messageDiv.html();
                messageDiv.html(historyMessage+data.answerContent);
              }else{
                  var answerContentDiv = "<div id=\""+data.blockId+"\" class=\"message-wrapper\">"
                  +"<img class=\"message-pp\" src=\"./1.png\" alt=\"profile-pic\">"
                  +"<div class=\"message-box-wrapper\">"
                  +"<div class=\"message-box\">"
                  + data.answerContent
                  +"</div>"
                 +"</div>"
                 +"</div>"
                  $("#chatContext").append(answerContentDiv);
              }

          } catch (e) {
            console.log(e)
          }

        };
        $this.chatWebsocket.onopen = function () {
          console.log("chatWebsocket连接成功");
          //$this.chatWebsocket.send("{'coinPair':'hello','time':'1m'}");
        };
        //连接发生错误
        $this.chatWebsocket.onerror = function () {
            console.log("chatWebsocket error");
        };
        //连接关闭
        $this.chatWebsocket.onclose = function () {
            console.log("chatWebsocket close");
        }


        $("#sendBtn").on("click",function(){

            try{
                var message = {
                    "questionContent" : $("#questionContent").val(),
                    "userId" : "user1"
                }

                $this.chatWebsocket.send(JSON.stringify(message));

                var questionContentDiv = "<div class=\"message-wrapper reverse\"> "
                +"<img class=\"message-pp\" src=\"./2.png\" alt=\"profile-pic\"> "
                +"<div class=\"message-box-wrapper\"> "
                +"<div class=\"message-box\"> "
                + $("#questionContent").val()
                +"\n</div> "
                +"</div> "
                +"</div> "

                $("#chatContext").append(questionContentDiv);
                $("#questionContent").val("");

             } catch (e) {
               console.log(e)
            }

        });

    });

</script>